﻿@model HomeControllerModel.Index
<div class="row-fluid">
    <div class="span3">
        <div class="login-box">
            @if (Request.IsAuthenticated)
            {
                <div>
                    <div>
                    </div>
                    <div class="btn">
                        <a target="_blank" class="btn-login" href="http://wan.jd.com/yeyou/pay.html">充值</a>
                        <a onclick="userLogout();" class="btn-regist" href="javascript:void(0);">退出</a>
                    </div>
                </div>
                <div>
                    最近登录历史</div>
                <ul>
                    <li>adsfasf</li>
                </ul>
            }
            else
            {
                <div><div class="btn">
                    <a onclick="loginPop();" class="btn-login" href="javascript:void(0)">登录</a>
                    <a onclick="regPop();" class="btn-regist" href="javascript:void(0)">免费注册</a>
                </div></div>
                <div>
                    大家都在玩...</div>
                <ul>
                    <li>adsfasf</li>
                </ul>
            }
        </div>
    </div>
    <div class="span6">
        <img src="http://img10.360buyimg.com/da/g12/M00/03/14/rBEQYFGLERcIAAAAAADRZLtwmgYAAAtVAO4OnsAANF8183.jpg"
            width="550" height="280" alt="" data-img="2">
    </div>
    <div class="span3">
        <div>
            <h5>
                新闻公告</h5>
            <ul class="unstyled">
                @foreach (var o in Model.Articles)
                {
                    <li title="@o.Title">@o.Title</li>
                }
            </ul>
        </div>
    </div>
</div>
<div>
    <div id="refine" class="plate m">
        <div class="mt">
            <h2>
                <span class="org">精品</span> 游戏
            </h2>
        </div>
        <div class="mc refined">
            <div class="row-fluid">
                <ul class="thumbnails">
                    @foreach (var o in Model.Games)
                    {
                        <li class="span3">
                            <div class="thumbnail">
                                <div class="thumbnail-img">
                                    <a target="_blank" href="@(WebSite.Game)/@(o.SiteName)">
                                        <img width="200" alt="@(o.Name)" src="http://img30.360buyimg.com/card/g12/M00/04/06/rBEQYFGMRRAIAAAAAARn2pMELlAAAA0cgDrTiUABGfy674.gif">
                                    </a>
                                </div>
                                <div class="thumbnail-info">
                                    <p>
                                        <strong>@(o.Name)</strong> <span>@(Game.Categories[o.Category])</span>
                                    </p>
                                    <p style="text-indent: 2em;">
                                        @(o.Summary)
                                    </p>
                                </div>
                                <div class="thumbnail-btn">
                                    <div class="thumbnail-btn">
                                        <a target="_blank" class="btn btn-danger" href="/play/gateway/@(o.GetLatest().Id)">进入新区</a>
                                        <a target="_blank" class="btn" href="@(WebSite.Game)/@(o.SiteName)">进入官网</a>
                                    </div>
                                </div>
                            </div>
                        </li>
                    }
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="row-fluid">
    <div class="span3">
        <div style="border: 1px solid #e1e1e1;">
            <div class="tabbable">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#1">最新开服</a></li>
                    <li><a href="#2">最新游戏</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active">
                        <table>
                            <tbody>
                                @foreach (var o in Model.Games.GetAllServers(true).OrderBy(o => o.Status).ThenByDescending(o => o.OpendOn))
                                {
                                    <tr>
                                        <td>@o.Game.Name
                                        </td>
                                        <td style="width: 60px;">@o.Alias
                                        </td>
                                        <td style="width: 60px;">@o.OpendOn.ToString("yy-MM-dd")
                                        </td>
                                    </tr>
                                }
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="span9">
        <div class="game-box">
            <div class="game-box-header">
                <strong>游戏列表</strong>
            </div>
            <div class="game-box-body">
                <div class="tabbable">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#tab1" data-toggle="tab">全部游戏</a></li>
                        <li><a href="#tab2" data-toggle="tab">最新游戏</a></li>
                    </ul>
                    <div class="tab-content">
                        <div id="tab1" class="tab-pane active">
                            <div class="row-fluid">
                                <ul class="thumbnails">
                                    @for (var i = 0; i < 20; i++)
                                    {
                                        var o = Model.Games.First();
                                        <li class="span3">
                                            <div class="thumbnail">
                                                <div class="thumbnail-img">
                                                    <a target="_blank" href="@(WebSite.Game)/@(o.SiteName).html">
                                                        <img alt="@(o.Name)" src="http://img30.360buyimg.com/card/g12/M00/04/06/rBEQYFGMRRAIAAAAAARn2pMELlAAAA0cgDrTiUABGfy674.gif">
                                                    </a>
                                                </div>
                                                <div class="thumbnail-info">
                                                    <p>
                                                        <strong>@(o.Name)</strong> <span class="muted">@(Game.Categories[o.Category])</span>
                                                    </p>
                                                </div>
                                            </div>
                                        </li>
                                    }
                                </ul>
                            </div>
                        </div>
                        <div id="tab2" class="tab-pane">
                            2
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@section css{
    <style type="text/css">
        a:focus { outline: none; }
        .m { margin-bottom: 20px; }
        
        .plate .mt { background-image: url("http://misc.360buyimg.com/virtuals/wan/skin/2012/i/icon0114.png"); background-position: 0 -916px; background-repeat: repeat; border-right: 1px solid #DDDDDD; border-top: 1px solid #EC3F00; height: 34px; line-height: 34px; }
        .plate .mt h2 { margin: 0; background-image: url("http://misc.360buyimg.com/virtuals/wan/skin/2012/i/icon0114.png"); background-position: 0 -350px; float: left; font-size: 18px; font-weight: 600; height: 34px; padding-left: 24px; width: 129px; }
        .plate .mt .org { color: #FF9544; float: left; font-size: 20px; }
        .plate .mt .word { background: url("i/icon01.png") no-repeat scroll left center transparent; float: left; height: 34px; overflow: hidden; padding-left: 15px; width: 220px; }
        .plate .mt .word s { background-position: -190px -355px; display: inline-block; height: 12px; position: relative; top: 3px; width: 15px; }
        .plate .mt .word s { display: none; }
        .plate .mt .word dd { height: 34px; overflow: hidden; width: 220px; }
        .plate .mc { background-color: #FFFFFF; border-color: #DDDDDD; border-style: solid; border-width: 0 1px 1px; padding: 15px 10px; }
        
        .refined .thumbnails { margin: 0; }
        .refined .thumbnails li { margin-bottom: 0; }
        .refined .thumbnail { border: 1px solid #EBEBEB; box-shadow: 1px 4px 4px 4px #F7F7F7; position: relative; }
        .refined .thumbnail-img { margin: 0 auto; width: 200px; }
        .refined .thumbnail-info { display: none; background-color: white; padding: 10px; cursor: pointer; width: 185px; height: 140px; }
        .refined .thumbnail-btn { margin: 15px 5px; }
        .refined .thumbnail-btn a { margin-left: 10px; }
        .refined .thumbnail:hover .thumbnail-info { display: block; position: absolute; bottom: 60px; opacity: 0.9; }
        .nav { margin-bottom: 0; }
        .tab-content { }
        
        .login-box { background-image: url("http://misc.360buyimg.com/virtuals/wan/skin/2012/i/icon0114.png"); background-repeat: no-repeat; }
        
        .game-box { border: 1px solid #e1e1e1; margin-bottom: 20px; }
        .game-box-header { height: 32px; line-height: 32px; background-image: url("http://misc.360buyimg.com/virtuals/wan/skin/2012/i/icon0114.png"); background-position: 0 -916px; background-repeat: repeat; border-bottom: 1px solid #cfcfcf; padding-left: 12px; }
        .game-box-body { }
        .game-box-body .nav-tabs { border: none; padding-top: 6px; padding-left: 20px; background-image: url("http://misc.360buyimg.com/virtuals/wan/skin/2012/i/icon0114.png"); background-position: 0 -1265px; background-repeat: repeat-x; background-color: #fff; position: relative; }
        .game-box-body .nav-tabs > li { margin: 0; }
        .game-box-body .nav-tabs > li > a { margin: 0; padding-top: 0; padding-bottom: 0; height: 27px; line-height: 27px; width: 60px; border: none; -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; }
        .game-box-body .nav-tabs > li > a:hover { border: none; }
        .game-box-body .nav-tabs > .active > a, .nav-tabs > .active > a:hover { background-image: url("http://misc.360buyimg.com/virtuals/wan/skin/2012/i/icon0114.png"); background-position: -125px -423px; }
        .game-box-body .tab-content { padding: 10px; }
        .game-box-body .tab-content .thumbnail-info { margin: 10px; }
    </style>
}
